<template>
	<view  @click="goToIndex">
		<!-- <movable-area class="movable-area">
			<movable-view class="movable-view" :x="x" :y="y" direction="all"> -->
		<view class="index">
			<view class="img"></view>
			<!-- <image src="../../static/image/电话2.png" mode=""></image> -->
		</view>
		<!-- 	</movable-view>
		</movable-area> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 400, //x坐标
				y: 400, //y坐标
			}
		},
		methods: {
			goToIndex() {
				//跳转首页
			uni.makePhoneCall({
			  phoneNumber: "400-6933-110",
			});
			}
		}
	}
</script>
<style lang="scss">
	.movable-area {
		//可以移动的范围
		height: 100vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		pointer-events: none; //此处要加，鼠标事件可以渗透

		.movable-view {
			//按钮大小
			width: 100rpx;
			height: 100rpx;
			pointer-events: auto; //恢复鼠标事件

			.index {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #0a98ff;
				font-size: 16rpx;
				color: #fff;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}

	.index {
		position: fixed;
		// pointer-events: none; //此处要加，鼠标事件可以渗透
		bottom: 300rpx;
		right: 15rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
		font-size: 16rpx;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
		background-color: #54AEFE;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: breathe 3s ease-in-out infinite;
		.img{
			width: 60rpx;
			height: 60rpx;
			background-image: url("../../static/image/电话.png");
			background-size: 100% 100%;
		}

	}
	
	/* 定义一个名为breathe的动画 */
	@keyframes breathe {
	  0% {
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	    transform: scale(1);
	  }
	  50% {
	    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
	    transform: scale(1.1);
	  }
	  100% {
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	    transform: scale(1);
	  }
	}
</style>